<template>
  <div>
    <h2>{{ this.data.bankName }}</h2>
    <p v-for="(item, index) in this.data.policies" :key="index">
      {{ item }}
    </p>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="loanPrice"
          name="loanPrice"
          label="贷款金额"
          placeholder="单位:万元"
          :rules="[{ required: true, message: '请填写贷款金额' }]"
        >
          <template #extra>
            万元
          </template>
        </van-field>
        <van-field
          v-model="result"
          is-link
          readonly
          name="picker"
          label="贷款计算器"
          placeholder="选择计算器模版"
          @click="showPicker = true"
        />
        <van-popup
          v-model:show="showPicker"
          position="bottom"
          :style="{ height: '40%' }"
        >
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            title="选择计算器模版"
          />
        </van-popup>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          开始试算
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
// import {
// 	Toast
// } from 'vant';

import {
  ref,
  reactive,
  // provide,
  inject
} from "vue";

export default {
  name: "Answer",
  props: {
    data: Object
  },
  setup(props) {
    const result = ref("");
    const loanPrice = ref();
    const showPicker = ref(false);
    const selected = reactive(Object);
    const res = reactive(props.data);
    const changeStep = inject("changeStep");
    const calcList = res.matchCalculators;
    const columns = calcList.map(item => {
      const options = item;
      const text = item.calcName;
      return {
        text,
        options
      };
    });
    const onSubmit = values => {
      const calcData = {
        loanPrice: values.loanPrice,
        selected: selected.value,
        bankInfo: props
      };
      changeStep(4, calcData);
    };
    const onConfirm = value => {
      result.value = value.text;
      selected.value = value;
      showPicker.value = false;
    };
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    const closePopup = () => {
      show.value = false;
    };
    return {
      result,
      onConfirm,
      showPicker,
      show,
      showPopup,
      closePopup,
      columns,
      selected,
      onSubmit,
      loanPrice
    };
  }
};
</script>
<style>
p {
  word-break: break-word;
}
</style>
